/*reset*/
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}img,body,html{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul,menu {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:'';}

html,body { margin:0; padding:0; height: 100%; }
body{	font: 13px Tahoma, Helvetica, sans-serif; overflow: auto; overflow-x: hidden; background: #F5F5F0; padding-right: 1px; }

/*** TOOLBAR & MENU ************************************************************************************************************/
menu#toolbar { margin: 0 auto 0 3px; padding: 3px 0 5px; display: table; position:relative; margin-bottom: 5px; }

.button { position:relative; float: left; margin-left: 5px; font-size: 0; cursor:default;  z-index: 20;
	padding: 2px 5px; text-decoration: none; text-shadow:0 1px 1px rgba(255, 255, 255, 0.5); 
	border:1px solid rgba(0, 0, 0, 0.3); outline:0 none; position: relative; 
	background: #fff url("../img/btn-gradient.png") repeat-x 0 0;

	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
	-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
	-moz-user-select: none;	-khtml-user-select: none; -webkit-user-select:ignore;
}
.button-left { border-top-right-radius: 0; border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; -moz-border-radius-topright: 0; -webkit-border-top-right-radius:0; -webkit-border-bottom-right-radius:0; }
.button-right { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; -moz-border-radius-topleft: 0; -webkit-border-top-left-radius:0; -webkit-border-bottom-left-radius:0; }
.button-center { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; margin-left: -1px; }
.button.hasmenu { background: url("../img/btn-gradient.png") repeat-x 0 0, url(../img/menu-down.png) no-repeat right 3px; background-color: #fff; padding-right: 20px; }
.button:hover { background-color: #e9e9e9; border:1px solid rgba(0, 0, 0, 0.5); z-index: 1; }
.button:active { -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; cursor: pointer;}

.mn-icon span,  
.button span { display:inline-block; padding: 2px 0 2px 20px; outline: none; cursor:default; font-size: 10px; font-weight: bold; color:#666; background: url(../img/icons.png) 0 0 no-repeat; }
.noicon span { padding-left: 0; background-image: none; } 
.notext { width: 16px; }
.notext span { text-shadow:none; font-size: 0; color: transparent; height: 12px; padding-left: 16px; width: 0; }

.mn-add span { background-position: 0 0; }
.mn-del span { background-position: 0 -16px; }
.mn-trash span { background-position: 0 -32px; }
.mn-print span { background-position: 0 -48px; }
.mn-help span { background-position: 0 -64px; }
.mn-settings span { background-position: 0 -80px; }
.mn-tag span { background-position: 0 -96px; }
.mn-tagedit span { background-position: 0 -112px;  }
.mn-ok span { background-position: 0 -128px;  }
.mn-refresh span { background-position: 0 -208px;  }


.menu { position: absolute; top:24px; margin: 0 0 0 -3px; padding: 1px 0 3px 0; text-align: center; display: none; z-index: 10; background: rgba(250, 250, 250, 0.95); border: 1px solid rgba(40, 40, 40, 0.5); 
	-moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; -webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px;  
	-moz-box-shadow: 0 1px 2px rgba(100, 100, 100, 0.5); -webkit-box-shadow: 0 1px 2px rgba(100, 100, 100, 0.5); box-shadow: 0 1px 2px rgba(100, 100, 100, 0.5);
}
.menu>li { padding: 4px 15px 6px; color: #666; font-size: 11px; font-weight: normal; text-align: left; white-space: nowrap; cursor:default; -moz-user-select: none;	-khtml-user-select: none; -webkit-user-select:ignore;}
.menu>li:hover { color: #fff; background: #666 url("../img/btn-gradient.png") repeat-x 0 0; text-shadow: 0 1px 1px rgba(255,255,255,0.3); }
.menu>li:hover span { color: #fff; text-shadow: 0 1px 1px rgba(255,255,255,0.3); }
.menu>li.separator { padding: 0; height: 0; border-top: 1px solid #999; margin: 2px 0; }

.iconmenu>li { padding-left: 26px; }
.menu .mn-icon { padding-left: 5px; }
.menu .mn-tagedit { padding: 2px 15px 4px 5px; }
/*******************************************************************************************************************************/






/*** MAIN PANEL ****************************************************************************************************************/
.taskgrp { padding: 1px 0; margin: 0 0 22px 0; border: 1px solid #7FA2CE; border-width: 2px 0; background: #FFF; clear: right;  
	-moz-box-shadow: 0 2px 2px rgba(200, 200, 200, 0.9); -webkit-box-shadow: 0 2px 2px rgba(200, 200, 200, 0.9); box-shadow: 0 2px 2px rgba(200, 200, 200, 0.9); 
}
.task-table { width: 100%; border-collapse: collapse; }
.task-table td { vertical-align: top; }
.task-table .task { width: 100%; color: #333; border: 1px solid #fff; border-width: 1px 0; }
.task-table .task .task-dd { width: 10px; cursor: move; padding: 0; }
.task-table .task .task-check { width: 16px; padding: 3px 0 0; }
.task-table .task .task-check div { width: 12px; height: 12px; margin: 2px 4px 1px 0; border: 2px solid #666; cursor: pointer;	-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.task-table .task .task-description { cursor: text; padding: 3px 5px; }
.task-table .task .task-description div[contenteditable="true"] { outline:0 none; min-height: 18px; padding: 1px 0 1px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.task-table .task:hover td { border-color: #F7E084; border-style: solid; border-width: 1px 0; }
.task-table .task:hover .task-dd,
.task-table .ui-sortable-helper .task-dd { background: url(../img/ddots.png) repeat-y 1px top; border-color: #F7E084; }
.task-table .task-done .task-check div { width: 16px; height: 16px; border: 0; background: url(../img/icons.png) no-repeat 0 -176px;}
.task-table .task-done .task-description div { color: #aaa; text-decoration: line-through; }
.task-table .task-loading .task-check div { background: url(../img/loading.gif) no-repeat 0 0; width: 16px; height: 16px; border: 0; cursor: default; }
.task-table tr.task-edit, .task-table .ui-sortable-helper td { background-color: #FFFFD4 !important; }
.task-table .task-edit td { border-color: #F7E084; border-style: solid; border-width: 1px 0; }
.task-table .ui-sortable-helper td { border-color: #F7E084; border-width: 1px 0; cursor: move !important;}
.task-table .ui-sortable-helper td div { cursor: move !important;}
.ui-state-highlight { display:block; width: 100%; }
/*******************************************************************************************************************************/



.helpText{ border-collapse:collapse; }
.helpText td { padding: 5px 10px; }
.helpText td:first-child { width: 80px; text-align: right; padding-right: 5px; }
.helpText td:first-child:after { content:':'}





.tag { float: right; height:14px; width: auto; color: #fff; background: #666 url("../img/btn-gradient.png") repeat-x 0 0; margin: 2px 5px 0 0; font-size: 11px; overflow:hidden;
	border: 1px solid rgba(50,50,50,0.1); cursor:pointer; opacity:0.9; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
}
.tag:hover { opacity:1; border: 1px solid rgba(30,30,30,0.5); }
.tag span { float:left; padding: 0px 4px 1px; text-shadow:0 0 1px rgba(20,20,20,0.4); -moz-user-select: none;	-khtml-user-select: none; -webkit-user-select:ignore; }
.tag .close { cursor:pointer; font-weight: bold; border-left: 1px solid rgba(250,250,250,0.5); padding: 0 0 3px 0; text-align:center; width: 14px; line-height: 100%; } 
.tag span.close {display:none;}  
.tag-expanded { width:auto; }
.tag-expanded span,.tag-expanded span.close {display:block;} 

.menutag { position: absolute; left: 5px; width:14px; height: 14px; border: 1px solid rgba(30,30,30,0.5); background: #666 url("../img/btn-gradient.png") repeat-x 0 0;	-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.task-done .tag { opacity: 0.4; } 




#tagManager { border: none; margin: 0 auto; width: 437px; }
#tagManager tr td { vertical-align: top; }
#tagManager #tagList { width: 121px; border: 1px solid #ccc; background:#fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
#tagManager #tagList ul { display: block; height: 100%; overflow-y:auto;}
#tagManager #tagList ul li { float: left; width: 100%; padding: 3px 0; cursor: pointer; }
#tagManager #tagList ul li .menutag { float: left; position: relative; left: auto; margin: 0 5px; padding: 1px 3px 2px; font-size: 11px; width: auto; height: auto; }
#tagManager #tagList ul li.active { background: #ccc; }
#tagManager #tagList ul li:hover { color: #fff; background: #666 url("../img/btn-gradient.png") repeat-x 0 0; }

#tagManager .toolbars td { padding-bottom: 2px; }
#tagManager .toolbars td .button-left { margin-left:0; }
#tagManager .toolbars input { float:left; padding: 2px 3px; width: 118px; border:1px solid rgba(0, 0, 0, 0.25); -moz-border-radius: 3px 0 0 3px; -webkit-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; }

#tagManager .tag-properties h3 { width: 100%; clear: both; }
#tagManager .tag-properties h3:last-of-type { padding-top: 2px; }
#tagManager .tag-properties .cpContainer { margin: 3px 0 1px; background: #666; float:left; padding: 1px 1px 1px 0; } 



#mask { position: fixed; top:0; bottom:0; left: 0; right: 0; background: #000; opacity:0; z-index: 100; }
#window { position: absolute; background: rgba(0,0,0,0.3); opacity:0; z-index: 101;	-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
#window .window-closer { float: right; width:18px; height: 16px; margin: 5px 7px 0 0; font-weight: bold; color: #777; text-align:center; cursor: pointer; }
#window .window-closer:hover { color: #eee; text-shadow:0 1px 2px #000;}
#window .window-title { color:#FFF; font-size:14px; font-weight:bold; padding: 5px 0 0 10px; cursor: move; text-shadow:0 1px 2px #000; }
#window .window-content { margin: 3px 8px 8px; min-width: 300px; max-width: 800px; padding: 5px 0; background: rgba(255,255,255,0.95); border: 1px solid #999; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }


#msgboxes { z-index: 10; position: absolute; bottom: 0; width:100%; }
.msgbox { color:#FFF; font-size: 11px; float: left; border: 1px solid #666; margin: 0 0 3px 3px; min-width: 150px; 
	text-shadow: 0 1px 1px rgba(0,0,0, 0.5); -moz-box-shadow:0 1px 1px #fff; -webkit-box-shadow:0 1px 1px #fff; box-shadow:0 1px 1px #fff; 
	background: url("../img/btn-gradient.png") repeat-x 0 0; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; 
}
.msgbox .closer { float:right; height:16px; width:16px; margin: 1px 2px 0 2px; cursor:pointer; background: url(../img/icons.png) 0 -192px no-repeat; }
.msgbox span { float:left; white-space: nowrap; margin:1px 0 0 5px; padding:1px 2px 2px 22px; background: url(../img/icons.png) 0 0 no-repeat; }
.msgbox span a { color: yellow; text-decoration: none; }
.msgbox span a:hover { text-decoration: underline; }
.msgbox-info,.msgbox-success { background-color: #7CA444; }
.msgbox-success span, .msgbox-info span {  background-position: 0 -130px; }
.msgbox-error { background-color: #B34F33; }
.msgbox-error span { background-position: 0 -144px; }
.msgbox-tip { background-color: #3E7BAA; }
.msgbox-tip span { background-position: 0 -160px; }



#saveStatus{ position:absolute; bottom:3px; left:5px; font-size: 11px; color: #aaa; }



/*colorpicker*/
.ColorPicker { width: 152px !important; }
.ColorPicker div {float:left;width:18px;height:18px;cursor:pointer;overflow:hidden;margin:0 0 0 1px;}
.ColorPicker .separator { background: #F5F5F5; border: 1px solid #666666; border-width:1px 0; clear:both; float:none; height:2px; width:153px; margin: 0; }
.ColorPicker .check { cursor:default; background:url(../img/checkmarks.gif) no-repeat center 3px;}
.ColorPicker .check-white { background-position: center 3px;}
.ColorPicker .check-black { background-position: center -10px;}
